Красивое всплывающее описание для картинок

Доброго времени суток, друзья, читатели и гости блога. Предлагаю вам красивый эффект всплывающего описания картинки с активной ссылкой. Очень симпатично это смотрится в сообщении. Этот эффект можно применять и к рекламным баннерам.

Допустим, дать краткое описание партнёрки, которое появится при наведении курсора на изображение (баннер).


Для тех кто публикует фотографии в блоге обозначить дату съёмки и пояснительный текст. Вариантов много. Нагрузки особой на блог этот вариант нести не будет, так как всё это устанавливается без Javascript. Давайте смотреть о чём идёт речь.

Вращающаяся картинка Как Как сделать бесконечно вращающуюся картинку

Сейчас, как всё это реализовать. Нам понадобится этот код.

<style>#image-hover {
}
#okno {
position:relative;
float:left;
margin:10px;
overflow:hidden;
padding: 1px;
}

#okno:hover {
-moz-box-shadow:0 0 20px rgba(0,0,0,0.75);
-webkit-box-shadow:0 0 20px rgba(0,0,0,0.75);
box-shadow:0 0 20px rgba(0,0,0,0.75);
}

#okno .caption {
position:absolute;
bottom:0;
left:0;
opacity: 0.75;
margin-bottom:-115px;
-webkit-transition: margin-bottom;
-webkit-transition-duration: 400ms;
-webkit-transition-timing-function: ease-out;
-moz-transition-property: margin-bottom;
-moz-transition-duration: 400ms;
-moz-transition-timing-function: ease-out;
-o-transition-property: margin-bottom;
-o-transition-duration: 400ms;
transition: margin-bottom;
transition-duration: 400ms;
transition-timing-function: ease-out;
}

#okno:hover .caption {
margin-bottom:0px;
}

#image-hover .caption {
width:100%;
height:95px;
padding:10px;
background:#F38D12 ;
color:#fff;
font-family: Arial, Helvetica, sans-serif;
}

#image-hover .caption b {
text-shadow: 0px 2px 0px #000;
}
#image-hover .caption {
color: #ddd;
line-height: 16px;
font-size: 16px;
}</style>

<div id="image-hover">
<div id='okno'>
<img src="URL вашей картинки"/>
<span class='caption'>
<b>Название </b>
Описание
</span>
</div>
</div>

Некоторые значения в коде можно подогнать на своё усмотрение. Выделенное красным цветом-это цвет фона всплывающего окна и цвет текста.
Синим цветом-размер текста. Ну и зелёным, путь к картинке (её адрес), название и описание.

Если есть необходимость сделать активную ссылку в описании нужно в редакторе сообщения выделите это слово и нажмите, как обычно на значок ссылка. При частом использовании эффекта всплывающего описания картинки будет лучше, если первую часть кода, заключённую в теги <style>тут код</style>, но уже без них установить в шаблоне блога перед строкой ]]></b:skin>. Подробнее об этом читайте здесь.

Думаю, что трудностей в использовании такого эффекта у вас не возникнет. А если появятся вопросы, задавайте. Разберёмся. И сегодня у меня всё. Удачи всем. До встречи.

здесь можно оформить подписку на новые шпаргалки

Введите Ваш email